<template>
    <el-date-picker v-model="operateTime" @change="operateChange" :shortcuts="shortcuts" type="daterange"
        range-separator="-" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" :start-placeholder="endP"
        :end-placeholder="startP" :disabledDate="disabledDateFn" />

</template>

<script setup lang="ts">
// 时间组件 需要一个时间绑定 需要一个事件回传
import dayjs from "dayjs"
const props = defineProps({
    startP: {
        type: String,
        default: "开始时间"
    },
    endP: {
        type: String,
        default: "结束时间"
    }

})



const shortcuts = [
    {
        text: '今天',
        value: () => {
            let today: any = new Date();
            let startOfDay: any = new Date(today.getFullYear(), today.getMonth(), today.getDate());
            // const endOfDay = new Date(startOfDay.getTime()); // 减去1毫秒以确保23:59:59被包含
            startOfDay = dayjs(startOfDay).format("YYYY-MM-DD HH:mm:ss")
            today = dayjs(today).format("YYYY-MM-DD HH:mm:ss")
            return [startOfDay, today];
        },
    },
    {
        text: '昨天',
        value: () => {
            let today: any = new Date();
            const yesterday = new Date(today)
            yesterday.setDate(yesterday.getDate() - 1)
            let startOfDay: any = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate())
            let endOfDay: any = new Date(startOfDay.getTime() + 24 * 60 * 60 * 1000 - 1)
            startOfDay = dayjs(startOfDay).format("YYYY-MM-DD HH:mm:ss")
            endOfDay = dayjs(endOfDay).format("YYYY-MM-DD HH:mm:ss")
            return [startOfDay, endOfDay]
        },
    },

    {
        text: '最近七天',
        value: () => {
            let today: any = new Date();
            const yesterday = new Date(today)
            yesterday.setDate(yesterday.getDate())
            let startOfDay: any = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() - 6)
            const endOfDay = new Date(startOfDay.getTime() + 7 * 24 * 60 * 60 * 1000 - 1)

            startOfDay = dayjs(startOfDay).format("YYYY-MM-DD HH:mm:ss")
            today = dayjs(today).format("YYYY-MM-DD HH:mm:ss")
            return [startOfDay, today]
        },
    },

    {
        text: '最近30天',
        value: () => {
            let today: any = new Date();
            const startOfDayToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
            let startOfDay30DaysAgo: any = new Date(startOfDayToday);
            startOfDay30DaysAgo.setDate(startOfDay30DaysAgo.getDate() - 29);
            const endOfDay30DaysAgo = new Date(startOfDay30DaysAgo.getTime() + 24 * 60 * 60 * 1000 * 30 - 1);

            startOfDay30DaysAgo = dayjs(startOfDay30DaysAgo).format("YYYY-MM-DD HH:mm:ss")
            today = dayjs(today).format("YYYY-MM-DD HH:mm:ss")

            return [startOfDay30DaysAgo, today];
        }
    },
    {
        text: '本月',
        value: () => {
            let today: any = new Date();
            // 获取本月第一天
            let startOfMonth: any = new Date(today.getFullYear(), today.getMonth(), 1);
            // 获取下个月的第一天
            const startOfNextMonth: any = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            // 本月最后一天就是下个月第一天的前一天
            const endOfMonth = new Date(startOfNextMonth - 1);

            startOfMonth = dayjs(startOfMonth).format("YYYY-MM-DD HH:mm:ss")
            today = dayjs(today).format("YYYY-MM-DD HH:mm:ss")
            return [startOfMonth, today];
        }
    },
    {
        text: '上月',
        value: () => {
            let today: any = new Date();
            let lastMonthFirstDay: any = new Date(today.getFullYear(), today.getMonth() - 1, 1);
            let lastMonthLastDay: any = new Date(today.getFullYear(), today.getMonth(), 0, 23, 59, 59);

            lastMonthFirstDay = dayjs(lastMonthFirstDay).format("YYYY-MM-DD HH:mm:ss")
            lastMonthLastDay = dayjs(lastMonthLastDay).format("YYYY-MM-DD HH:mm:ss")
            return [lastMonthFirstDay, lastMonthLastDay];
        },
    },
]
// 做么操作
const operateTime = defineModel("operateTime")
const emit = defineEmits(['timeChange'])

const disabledDateFn = (time: any) => {
    return time.getTime() > Date.now()
}
const operateChange = (time: any) => {    
    // 数据传递回去
    if (time && time.length > 0 && !areEqual(time)) {        
        time[0] = new Date(time[0]);
        time[1] = new Date(time[1]);
        time[1].setHours(23, 59, 59, 999);
        time[0] = dayjs(time[0]).format("YYYY-MM-DD HH:mm:ss")
        time[1] = dayjs(time[1]).format("YYYY-MM-DD HH:mm:ss")
    }
    emit('timeChange', time)
    operateTime.value = time
}
const areEqual = (time: any) => {
    const set1 = JSON.stringify(shortcuts[0].value())
    const set2 = JSON.stringify(shortcuts[2].value())
    const set3 = JSON.stringify(shortcuts[3].value())
    const set4 = JSON.stringify(shortcuts[4].value())
    const arr = [set1, set2, set3, set4]
    const timeArr = JSON.stringify(time)
    return arr.some(item => item == timeArr)
}
</script>

<style scoped></style>